<template>
  <div class="select-item">
    <h3>{{$attrs.title}} <f7-link v-if="showAfterButton">全部 <f7-icon icon="iconfont icon-xiasanjiaoxing"></f7-icon></f7-link></h3>
    <ul>
      <slot/>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "select-item",
    data () {
      return {
        curActive: this.value
      }
    },
    watch: {
      value(newv) {
        this.curActive = newv;
      }
    },
    props: {
      value: [String, Number],
      showAfterButton: {
        type: Boolean,
        default: false
      },
    },
    methods: {
      emitEvent(event, data) {
        this.$emit(event, data);
      }
    }
  }
</script>

<style scoped lang="scss">
  .select-item {
    h3 {
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      margin-bottom: 40px;
      margin-top: 20px;
      color: #506679;
      .link {
        font-weight: normal;
        font-size: 20px;
        line-height: 10px;
        color: #5888ee;
      }
    }
  }
</style>
